﻿<section class="pc-news">
	<!-- 新闻动态 -->
	<div class="swiper-containers">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(item,index) in xwlbtList">
				<a :href="item.remark">
					<div class="swiper-zoom-container" style="display: block;position: relative;">
						<img :src="imgUrl+item.image">
					</div>
				</a>
			</div>
		</div>
	</div>
	        
	</div>
</section>
<!-- <script type="text/javascript" src="js/swiper.min.js"></script> -->
<link type="text/css" rel="stylesheet" href="css/swiper.min.css">
<script type="text/javascript">
	const App2 = {
		data() {
			return {
				imgUrl: 'http://dbs.wutp.com.cn/CM-API',
				xwlbtList: [],
			};
		},
		mounted() {
			this.getXwlbt();
			this.getNews();
		},
		methods: {
			openUrl(remark) {
				debugger
				if (remark) {
					// window.location.href = remark
					window.open(remark)
				}
			},
			// 获取新闻动态轮播图
			async getXwlbt() {
			    let that = this;
			    await axios({
			        method: "get",
			        url: "http://dbs.wutp.com.cn/CM-API/homePageApi/getBanner?type=XWLBT",
			    }).then(function (res) {
			        setTimeout(() => {
			            new Swiper('.swiper-containers', {  //绑定如期换成id!!!
			                pagination: '.swiper-pagination',
			                paginationClickable: true,
			                nextButton: '.swiper-button-next',
			                prevButton: '.swiper-button-prev',
			                spaceBetween: 30,
			                autoplay: 5000,
			                grabCursor: true,
			                autoplayDisableOnInteraction: true,
							speed:1000,
			            });
			        }, 10)
			        console.log('动态轮播图', res)
			        that.xwlbtList = res.data.data;
			    })
			}
		}
	};
	Vue.createApp(App2).mount('.pc-news');
</script>
